<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-02-02 11:12:25
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-04-24 14:57:07
 * @Description:
 *
-->

<template>
  <div class="monitor-detail-container">
    <el-carousel
      height="calc(100vh - 130px)"
      direction="vertical"
      :autoplay="false"
    >
      <el-carousel-item key="DetailUsage">
        <DetailUsage />
      </el-carousel-item>
      <el-carousel-item key="DetailTop5">
        <DetailTop5 />
      </el-carousel-item>
      <el-carousel-item key="DetailList">
        <DetailList />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import DetailList from './components/DetailList.vue'
import DetailUsage from './components/DetailUsage.vue'
import DetailTop5 from './components/DetailTop5.vue'

export default {
  name: 'SystemMonitorCNResDetail',
  components: { DetailTop5, DetailList, DetailUsage }, // 组件
  data() {
    return {}
  },
  created() {},
  methods: {}
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.monitor-detail-container {
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(217, 213, 234, 0.5);
  border-radius: 8px;
  min-height: calc(100vh - 90px);
  margin: 20px;
  padding: 0px;

  /deep/ .el-carousel__indicator--vertical .el-carousel__button {
    background-color: #b9b9b9;
  }
  /deep/ .el-carousel__indicator.is-active button {
    background-color: #0091ff !important;
  }
}
</style>
